<template>
	<view>
		<cu-custom bgColor="bg-orange" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">碎碎念</block>
		</cu-custom>
		<view class="inputbox">
			<van-icon name="plus" size='50rpx' class="box1" />
			<van-field :value="value" placeholder="说点什么吧..." autosize class="input"
				custom-style='border: 1rpx solid #eee;border-radius: 50rpx;background-color: #fff1b9;width:100%;'
				@change='change' />
			<van-icon name="success" size='50rpx' class="box2" @click='save' />
		</view>
		<view class="attention">长按可删除消息</view>
		<view class="zong">
			<view class="user_box">
				<view class="user_for" v-for="(chat,index) in chatinfo" :key="index" ref="userFor"
					@touchstart.prevent="touchstart(index)" @touchend.prevent="touchend">
					<!-- 圆球 -->
					<view class="line_radio" style="background-color: #8EC0E4;"></view>
					<view class="outside">
						<view class="right_box">
							<view class="title">{{chat.userContent}} </view>
							<view class="desc">
								<van-icon name="star" class="icon" />
								{{chat.time}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				value: '',
				Loop: ''
			}
		},

		computed: {
			...mapState('m_chat', ['chatinfo']),
			...mapState('m_user', ['token', 'userinfo']),

		},
		onLoad() {
			if (!this.chatinfo.length) this.getchatinfo()
		},
		methods: {
			...mapMutations('m_chat', ['updatechatinfo']),
			touchstart(index) {
				let that = this;
				clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
				this.Loop = setTimeout(function() {
					uni.showModal({
						title: '删除',
						content: '请问要删除本条消息吗？',
						success: async (res) => {
							let array = [...this.chatinfo]
							array.splice(index, 1)
							if (res.confirm) {
								const result = await uni.$http.post('/update/updatechatinfo', {
									chatinfo: array
								})
								if (result.data.status === 0) {
									this.updatechatinfo(array)
									uni.showToast({
										title: '删除成功',
										duration: 2000
									})
								} else {
									uni.showToast({
										title: '删除失败',
										duration: 2000
									})
								}
							} else if (res.cancel) {
								uni.showToast({
									title: '已取消删除',
									duration: 2000
								})
							}
						}
					});
				}.bind(this), 1000);
			},

			touchend() {
				clearInterval(this.Loop);
			},
			async getchatinfo() {
				const data = await uni.$http.get('/get/getchatinfo')
				if (data.data.status === 0) {
					this.updatechatinfo(data.data.data)
				}
			},

			getnowtime() {
				// 创建一个日期对象
				let currentDate = new Date();
				let year = currentDate.getFullYear();
				let month = currentDate.getMonth() + 1;
				let date = currentDate.getDate();
				let hours = currentDate.getHours();
				let minutes = currentDate.getMinutes();
				let seconds = currentDate.getSeconds();
				return year + "/" + month + "/" + date + " " + hours + ":" + minutes + ":" + seconds;
			},
			async save() {
				if (!this.value) return;

				const time = this.getnowtime();
				let array = []; // 创建一个空数组

				// 检查 this.chatinfo 是否为有效数组
				if (Array.isArray(this.chatinfo)) {
					array = [...this.chatinfo];
				}

				array.unshift({
					time: time,
					userContent: this.value
				});

				try {
					const result = await uni.$http.post('/update/updatechatinfo', {
						chatinfo: array
					});

					if (result.data.status === 0) {
						this.updatechatinfo(array);
						this.value = "";
					} else {
						this.value = "";
						uni.showToast({
							title: result.data.message,
							icon: 'error',
							duration: 1500
						});
					}
				} catch (error) {
					this.value = "";
					uni.showToast({
						title: '请求失败',
						icon: 'error',
						duration: 1500
					});
				}
			},
			change(e) {
				this.value = e.detail
			}
		},

	}
</script>
<style lang="scss" scoped>
	.user_box {
		width: 80%;
		margin-left: 50rpx;

		.user_for {
			margin-bottom: 20rpx;
			margin-top: 10rpx;

			.line_radio {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				position: relative;
				top: 0;
				right: 6rpx;
				overflow: hidden;
			}

			.outside {
				padding-left: 30rpx;
				margin-top: 10rpx;
				border-left: 12rpx dashed #CADBE9;

				.right_box {
					width: 100%;
					background-color: #fff1b9;
					border-radius: 30rpx;
					padding: 10rpx 20rpx 20rpx 20rpx;

					.title {
						font-size: 30rpx;
						word-wrap: break-word;
					}

					.desc {
						font-size: 28rpx;
						color: #D9D4CF;
						display: flex;
						margin-top: 20rpx;
						align-items: center;

						.icon {
							margin-right: 20rpx;
							width: 34rpx;
							height: 34rpx;
							border-radius: 50%;
						}
					}

				}
			}

		}
	}


	.attention {
		color: #E0E3DA;
		margin-left: 70%;
	}

	.inputbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;

		.input {
			width: 90%;
		}

		.box1 {
			margin-left: 17rpx;
			margin-right: 17rpx;
		}

		.box2 {
			margin-left: 17rpx;
			margin-right: 17rpx;
		}
	}
</style>